import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this, // 让程序和设备的刷新频率一致
      duration: const Duration(milliseconds: 1000),
    )..repeat(reverse: true);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.refresh),
          onPressed: () {
            _controller.repeat(reverse: true); // 重复
          },
        ),
        appBar: AppBar(
          title: const Text('SlideTransition实现Container交错式动画'),
        ),
        body: Column(
          children: [
            SlideContainer(
              controller: _controller,
              color: Colors.blue[100],
              curve: const Interval(0, 0.2),
            ),
            SlideContainer(
              controller: _controller,
              color: Colors.blue[300],
              curve: const Interval(0.2, 0.4),
            ),
            SlideContainer(
              controller: _controller,
              color: Colors.blue[500],
              curve: const Interval(0.4, 0.6),
            ),
            SlideContainer(
              controller: _controller,
              color: Colors.blue[700],
              curve: const Interval(0.6, 0.8),
            ),
            SlideContainer(
              controller: _controller,
              color: Colors.blue[900],
              curve: const Interval(0.8, 1),
            ),
            const SizedBox(height: 40),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  onPressed: () {
                    _controller.forward(); // 运动一次
                  },
                  child: const Text('forward'),
                ),
                ElevatedButton(
                  onPressed: () {
                    _controller.reverse();
                  },
                  child: const Text('reverse'), // 翻转
                ),
                ElevatedButton(
                  onPressed: () {
                    _controller.stop();
                  },
                  child: const Text('stop'), // 停止
                ),
                ElevatedButton(
                  onPressed: () {
                    _controller.reset();
                  },
                  child: const Text('reset'), // 重置
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

class SlideContainer extends StatelessWidget {
  final AnimationController controller;
  final Color? color;
  final Curve curve;

  const SlideContainer({
    super.key,
    required this.controller,
    required this.color,
    required this.curve,
  });

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: controller.drive(
        Tween(begin: const Offset(0, 0), end: const Offset(1, 0))
            .chain(CurveTween(curve: curve)),
      ),
      child: Container(
        width: 120,
        height: 60,
        color: color,
      ),
    );
  }
}
